<template>
  <img alt="Vue logo" src="../assets/logo.png" />
  <!-- 一个内置组件，用来对组件树中的异步组件进行处理 -->
  <!-- <Suspense @padding="suspensePadding" @resolve="suspenseResolve" @fallback="suspenseFallback">
    <template #default>
      <comp2></comp2>
    </template>
    <template #fallback>
      <h1>loading.........</h1>
    </template>
  </Suspense> -->
  <textarea @input="nameChange" rows="10" cols="100"></textarea>
  <async1 :name="name" :age="name.length"></async1>
</template>

<script setup lang="ts">
// 顶层只要有await表达式 就会让该组件变成 异步组件 同时可以交由Suspense组件处理异步状态
// const res = await fetch('api/login');
// suspense组件可以处理异步组件之间的 加载中 错误加载 加载完成 三个状态多个组件之间的关系
import {
  // defineAsyncComponent,
  version,
  getCurrentInstance,
  inject,
  ref,
} from "vue";
import async1 from "@/components/async_comp/async1.vue";
// const comp1 = defineAsyncComponent(() => {
//   return new Promise((resolve) => {
//     setTimeout(async () => {
//       // eslint-disable-next-line @typescript-eslint/no-explicit-any
//       let async2: any = await import('@/components/async_comp/async1.vue')
//       resolve(async2);
//     }, 5000);
//   })
// })
// import loading from "@/components/async_comp/loading.vue";
// import error from "@/components/async_comp/error.vue";
console.log("Vue 版本", version);
const name = ref("");
const { proxy } = getCurrentInstance();
proxy.$storage.setStorageType("sessionStorage");
console.log(proxy.$storage.set("spl", "苏普路"));
console.log(proxy.$storage);
console.log("inject1", inject("app_val_msg1"));
console.log("inject2", inject("app_val_msg2"));

const nameChange = (e: Event) => {
  let tar = e.target || e.srcElement,
    val = tar.value;
  name.value = val
};

// const comp2 = defineAsyncComponent({
//   loader: () => {
//     // 当使用延迟器模拟时，组件会报错，但是能正常渲染出来
//     // return new Promise((resolve, reject) => {
//     //   setTimeout(async () => {
//     //     const comp: any = await import('@/components/async_comp/async2.vue');
//     //     resolve(comp)
//     //   }, 6000);
//     // })

//     // 正常的使用应该是此方式  还有服务器端获取组件的方式（可能也会出现问题，目前不具备测试条件）
//     return import("@/components/async_comp/async2.vue");
//   },
//   loadingComponent: loading,
//   // 从加载时组件到最终显示的组件，默认延迟200毫秒，否则会在网络情况良好的情况下，存在快速切换组件的情况，闪屏的存在，优化用户体验
//   delay: 200,
//   errorComponent: error,
// });

// suspense 组件padding状态事件处理
// const suspensePadding = (): void => {
//   console.log('suspensePadding:');
// }
// suspense 组件Resolve状态事件处理
// const suspenseResolve = (): void => {
//   console.log('suspensePadding:')
// }
// suspense 组件Fallback状态事件处理
// const suspenseFallback = () => {
//   console.log('suspenseFallback');
// }
</script>

<style scoped>
.async-component-wrapper {
  width: 100%;
  height: 50vh;
  background-color: red;
}
</style>
